<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的信息</title>
    <link rel="stylesheet" href="../css/me.css">
</head>

<body>
    <header>


        <div class="a">
            <div class="b">
                <a href="">

                    <img id="avatar" src="/images/profilePhoto.jpg" alt="Avatar">
                    <input id="fileInput" type="file" accept="image/*">
                </a>
            </div>
            <div class="c">
                <div class="c1">
                    <p>user</p>
                </div>
                <div class="c2">
                    <img src="/images/修改.png" alt="">
                </div>
            </div>
            <div class="d">
                <div class="d1">
                    <p>会员</p>
                </div>
                <div class="d2">
                    <p class="space">空间</p>
                </div>
                <img src="/images/go.jpg" alt="">
            </div>
            <div class="e">
                <p>
                    剩余硬币：52&nbsp;&nbsp;余额：1314
                </p>
            </div>
        </div>

    </header>
    <article>

        <ul class="ul_2">
            <li>
                <div class="R">
                    <div class="sub2">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        动态数量：0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        关注数量：6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        粉丝数量：0
                    </div>
                </div>
            </li>
            <li>
                <div class="R2">
                    <div class="tit">会员等级经验加速</div>
                    <div class="sub">
                        会员每天免费领！<br>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="nav">
            <li>
                <a href="#" title="离线缓存">
                    <img src="/images/离线缓存.jpg">
                    <span>离线缓存</span>
                </a>
            </li>
            <li>
                <a href="#" title="我的收藏">
                    <img src="/images/我的收藏.jpg">
                    <span>我的收藏</span>
                </a>
            </li>
            <li>
                <a href="#" title="稍后观看">
                    <img src="/images/稍后观看.jpg">
                    <span>稍后观看</span>
                </a>
            </li>
            <li>
                <a href="#" title="历史记录">
                    <img src="/images/历史记录.jpg">
                    <span>历史记录</span>
                </a>
            </li>
        </ul>
        <ul class="ul_2">
            <li>
                <div class="R">
                    <div class="tit">推荐服务</div>

                </div>
            </li>
        </ul>
        <ul class="nav">
            <li>
                <a href="#" title="我的课程">
                    <img src="/images/我的课程.jpg">
                    <span>我的课程</span>
                </a>
            </li>
            <li>
                <a href="#" title="免流量服务">
                    <img src="/images/免流量服务.jpg">
                    <span>免流量服务</span>
                </a>
            </li>
            <li>
                <a href="#" title="个性装扮">
                    <img src="/images/个性装扮.jpg">
                    <span>个性装扮</span>
                </a>
            </li>
            <li>
                <a href="#" title="我的钱包">
                    <img src="/images/我的钱包.jpg">
                    <span>我的钱包</span>
                </a>
            </li>
        </ul>
        <ul class="nav">
            <li>
                <a href="#" title="游戏中心">
                    <img src="/images/游戏中心.jpg">
                    <span>游戏中心</span>
                </a>
            </li>
            <li>
                <a href="#" title="会员购中心">
                    <img src="/images/会员购中心.jpg">
                    <span>会员购中心</span>
                </a>
            </li>
            <li>
                <a href="#" title="我的直播">
                    <img src="/images/我的直播.jpg">
                    <span>我的直播</span>
                </a>
            </li>
            <li>
                <a href="#" title="漫画">
                    <img src="/images/漫画.jpg">
                    <span>漫画</span>
                </a>
            </li>
        </ul>
        <ul class="nav">
            <li>
                <a href="#" title="必火推广">
                    <img src="/images/必火推广.jpg">
                    <span>必火推广</span>
                </a>
            </li>
            <li>
                <a href="#" title="创作中心">
                    <img src="/images/创作中心.jpg">
                    <span>创作中心</span>
                </a>
            </li>
            <li>
                <a href="#" title="社区中心">
                    <img src="/images/社区中心.jpg">
                    <span>社区中心</span>
                </a>
            </li>
            <li>
                <a href="#" title="公益">
                    <img src="/images/公益.jpg">
                    <span>公益</span>
                </a>
            </li>
        </ul>
        <ul class="ul_2">
            <li>
                <div class="R">
                    <div class="tit">更多服务</div>
                    <ul class="ul_3">
                        <li>
                            <img src="/images/联系客服.jpg">
                            <div class="R3">
                                <div class="tit">联系客服</div>
                            </div>
                            <img src="/images/go.png" class="go">
                        </li>
                        <li>
                            <img src="/images/听视频.jpg">
                            <div class="R3">
                                <div class="tit">听视频</div>
                            </div>
                            <img src="/images/go.png" class="go">
                        </li>
                        <li>
                            <img src="/images/未成年人守护.jpg">
                            <div class="R3">
                                <div class="tit">未成年守护</div>
                            </div>
                            <img src="/images/go.png" class="go">
                        </li>
                        <li>
                            <img src="/images/设置.jpg">
                            <div class="R3">
                                <div class="tit">设置</div>
                            </div>
                            <img src="/images/go.png" class="go">
                        </li>
                        <li>
                            <div class="R3">
                                <button id="logoutBtn" onclick="logout()">退出登录</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

        </ul>

    </article>

    <footer>
        <div class="navi">
            <div class="nav-item">
                <a href="../html/home.html">
                    <img src="../images/首页.jpg" />
                    <p>首页</p>
                </a>
            </div>
            <div class="nav-item">
                <a href="../html/rank.html">
                    <img src="../images/排行榜.jpg" />
                    <p>排行榜</p>
                </a>
            </div>
            <div class="nav-item">
                <a href="../html/forum.html">
                    <img src="../images/动态.jpg" />
                    <p>动态</p>
                </a>
            </div>

            <div class="nav-item">
                <a href="../html/me.html">
                    <img src="../images/我的.jpg" />
                    <p>我的</p>
                </a>
            </div>
        </div>
    </footer>

    <script>
        document.getElementById('fileInput').addEventListener('change', function (event) {
            var file = event.target.files[0]; // 获取文件对象
            if (file) {
                var reader = new FileReader(); // 创建FileReader对象

                reader.onload = function (e) {
                    var avatar = document.getElementById('avatar');
                    avatar.src = e.target.result; // 将读取的结果设置为头像的src属性
                };

                reader.readAsDataURL(file); // 以DataURL的形式读取文件
            }
        });
    </script>
    <script>
        function logout() {
            // 登出功能
            document.getElementById('logoutBtn').addEventListener('click', function () {
                if (confirm('确定要登出吗？')) { // 使用确认框
                    localStorage.removeItem('phoneNumber');
                    alert('您已成功登出。');
                    window.location.href = 'register.html';
                }
            });


            document.getElementById('logoutBtn').addEventListener('click', function () {
                // 移除用户信息
                localStorage.removeItem('phoneNumber');
                // 显示登出提示
                alert('您已成功登出。');
                // 重定向到登录页面
                window.location.href = 'register.html';
            });
        }

    </script>
</body>

</html>